// html,
// body,
// #app {
//   height: 100%;
//   background-color: #f8f8f8;
// }

// #app {
//   min-width: 1200px;
// }

// .header {
//   position: relative;
//   height: 70px;
//   padding-right: 300px;
//   /*background: #005569 url(../images/logo_bg.png) no-repeat; */
//   background: #4381e6;
//   background-size: 100% 100%;

//   .info {
//     float: left;

//     .title {
//       float: left;
//       display: inline-block;
//       position: relative;
//       padding-left: 60px;
//       line-height: 70px;
//       color: #fff;
//       font-size: 20px;
//       font-weight: normal;

//       &:before {
//         content: '';
//         position: absolute;
//         top: 0;
//         left: 20px;
//         display: inline-block;
//         width: 30px;
//         height: 100%;
//         background: url(../images/logo.png) no-repeat center;
//         background-size: 28px;
//       }
//     }

//     .name {
//       float: left;
//       display: inline-block;
//       padding-left: 20px;
//       line-height: 70px;
//       color: #fff;
//     }
//   }

//   .is-active {
//     border-radius: 20px;
//     color: #fff !important;
//     font-size: 16px;
//     background: #2861bf !important;
//     border-bottom: none !important;
//   }

//   .control {
//     position: absolute;
//     top: 0;
//     right: 0;
//     text-align: right;

//     .admin {
//       float: left;
//       position: relative;
//       display: inline-block;
//       padding-left: 34px;
//       width: 120px;
//       height: 70px;
//       line-height: 70px;
//       color: #fff;
//       text-align: left;
//       background: url(../images/department.png) no-repeat left center;
//       background-size: 30px;
//       white-space: nowrap;
//       text-overflow: ellipsis;
//       overflow: hidden;
//     }

//     .close {
//       float: left;
//       display: inline-block;
//       width: 50px;
//       height: 70px;
//       background: url(../images/closeBtn.png) no-repeat center;
//       padding: 7px 0px;
//       margin-right: 10px;
//     }
//   }
// }

.container {
  position: relative;
  height: calc(100% - 70px);
  padding-left: 200px;
  transition: all .5s;

  &.no-sidebar {
    padding-left: 0;
  }

  .sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: #2f4d89;
    padding: 10px 10px;
    transition: all .5s;
    overflow-y: auto;
    z-index: 99;

    &::-webkit-scrollbar {
      display: none;
    }

    .side {
      &-list {
        .child {
          &-list {
            /*position: absolute;
            bottom: 0;
            width: 100%;*/
          }

          &-item {
            padding-top: 6px;

            a {
              display: block;
              /* border-left: 5px solid transparent; */
              border-radius: 20px;
              /* padding: 10px 0 10px 35px; */
              padding: 8px 0;
              color: #fff;
              /* background-color: #073640; */
              text-align: center;

              &.active,
              &:hover {
                /* border-left-color: #1dd49b;
                background-color: #11856e; */
                background: #173777;
              }
            }
          }
        }
      }

      &-item {
        margin: 10px;

        &>a {
          position: relative;
          display: block;
          border-radius: 20px;
          /* padding: 10px 0 10px 40px; */
          padding: 8px 0 8px 38px;
          font-size: 16px;
          background: #fff none no-repeat;
          background-size: 18px auto;
          background-position: 10px center;

          &.origin {
            background-image: url(../images/dataSource_gray.png);
          }

          &.dispatch {
            background-image: url(../images/schedule_gray.png);
          }

          &.rule {
            background-image: url(../images/rule_gray.png);
          }

          &.basics {
            background-image: url(../images/basics_gray.png);
          }

          &:after {
            content: '+';
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            display: inline-block;
            height: 30px;
            line-height: 30px;
            color: #343434;
            /* width: 6px;
            height: 6px;
            margin-top: -3px;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            transform: rotate(45deg);
            transition: transform .5s; */
          }

          &.act:after {
            content: '-';
            /* transform: rotate(135deg); */
          }

          &.current {
            color: #4381e6;

            /* background-color: rgba(255, 255, 255, .2); */
            &.origin {
              background-image: url(../images/dataSource_blue.png);
            }

            &.dispatch {
              background-image: url(../images/schedule_blue.png);
            }

            &.rule {
              background-image: url(../images/rule_blue.png);
            }

            &.basics {
              background-image: url(../images/basics_blue.png);
            }
          }

          &.no-child:after {
            display: none;
          }
        }
      }

      &-container {
        position: relative;
        height: 0;
        overflow: hidden;
        transition: height 0.6s;
      }
    }
  }

  &.collapse {
    padding-left: 84px;

    &.no-sidebar {
      padding-left: 0;
    }

    .sidebar {
      width: 84px;
    }
  }
}

.main {
  height: calc(100% - 51px);
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
}

.no-sidebar .main {
  width: 100%;
  height: 100%;
}

.tags-wrap {
  border-bottom: 1px solid #ddd;
}

.table-options {
  position: relative;
  border: 1px solid #ebeef5;
  padding: 10px;

  .unit {
    float: left;
    padding: 5px 20px 5px 0;
  }

  .action {
    display: inline-block;
    padding: 5px 0;
    float: right;
  }

  .icon-icon_tianjia {
    font-size: 24px;
    font-weight: bold;
    color: #999;

    &:hover {
      color: #56a6f2;
    }
  }
}

.table-head {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  padding: 15px;
  background-color: #eee;

  .title {
    padding: 6px 0;
  }

  .btn {
    padding: 2px 0;
  }

  .icon-icon_tianjia {
    font-size: 24px;
    font-weight: bold;
    color: #999;

    &:hover {
      color: #56a6f2;
    }
  }

  .icon-jiahao {
    font-size: 25px;
    color: #56a6f2;
  }

  .table-head-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .head-flex-child {
      font-size: 12px;
      height: 32px;
      display: flex;
      align-items: center;
    }
  }
}

.table-title {
  padding: 15px;
  text-align: center;
  background: #eee;
}

.table-list {
  .icon {
    &:not(:last-child) {
      margin-right: 5px;
    }

    .svg-inline--fa,
    .iconfont {
      color: #999;
      font-size: 18px;

      &:hover {
        color: #409eff;
      }
    }

    .iconfont {
      font-size: 20px;
    }
  }

  .edit,
  .delete,
  .start,
  .pause,
  .implement,
  .menuAdd {
    float: left;
    display: inline-block;
    width: 18px;
    height: 28px;
    padding: 0 5px;
    background: none no-repeat center;
    background-size: 18px;
  }

  .edit {
    background-image: url(../images/update.png);

    &:hover {
      background-image: url(../images/update_hover.png);
    }
  }

  .delete {
    background-image: url(../images/delete.png);

    &:hover {
      background-image: url(../images/delete_hover.png);
    }
  }

  .start {
    background-image: url(../images/start.png);

    &:hover {
      background-image: url(../images/start_hover.png);
    }
  }

  .pause {
    background-image: url(../images/pause.png);

    &:hover {
      background-image: url(../images/pause_hover.png);
    }
  }

  .implement {
    background-image: url(../images/implement.png);

    &:hover {
      background-image: url(../images/implement_hover.png);
    }
  }

  .menuAdd {
    background-image: url(../images/menuAdd.png);

    &:hover {
      background-image: url(../images/menuAdd_hover.png);
    }
  }
}

// 侧边栏展开关闭
.sidebar .list-open {
  width: 20px;
  height: 14px;
  float: right;
  cursor: pointer;
  background: url("../../assets/images/list-open.png");
}

.listopen {
  width: 14px;
  height: 20px;
  float: right;
  cursor: pointer;
  background: url("../../assets/images/list-close.png");
}

// 侧边栏菜单图标
.sidebar-el-menu {

  .el-icon-instrument,
  .el-icon-datasourcemanagement,
  .el-icon-dispatchingmanagement,
  .el-icon-standardrule,
  .el-icon-basicmanagement,
  .el-icon-usermanagement,
  .el-icon-privilegemanagement,
  .el-icon-logmanagement,
  .el-icon-systemmonitoring,
  .el-icon-datasecurity,
  .el-icon-hadoopaudit {
    float: left;
    display: inline-block;
    width: 18px;
    height: 28px;
    padding: 0 5px;
    background: none no-repeat center;
    background-size: 18px;
  }

  // 仪表板
  .el-icon-instrument {
    background-image: url(../images/instrument.png);

    &:hover {
      background-image: url(../images/instrument.png);
    }
  }

  // 数据源管理
  .el-icon-datasourcemanagement {
    background-image: url(../images/datasourcemanagement.png);

    &:hover {
      background-image: url(../images/datasourcemanagement_hover.png);
    }
  }

  // 调度管理
  .el-icon-dispatchingmanagement {
    background-image: url(../images/dispatchingmanagement.png);

    &:hover {
      background-image: url(../images/dispatchingmanagement_hover.png);
    }
  }

  // 标准规则
  .el-icon-standardrule {
    background-image: url(../images/standardrule.png);

    &:hover {
      background-image: url(../images/standardrule.png);
    }
  }

  // 基础管理
  .el-icon-basicmanagement {
    background-image: url(../images/basicmanagement.png);

    &:hover {
      background-image: url(../images/basicmanagement_hover.png);
    }
  }

  // 用户管理
  .el-icon-usermanagement {
    background-image: url(../images/usermanagement.png);

    &:hover {
      background-image: url(../images/usermanagement_hover.png);
    }
  }

  // 权限管理
  .el-icon-privilegemanagement {
    background-image: url(../images/privilegemanagement.png);

    &:hover {
      background-image: url(../images/privilegemanagement_hover.png);
    }
  }

  // 日志管理
  .el-icon-logmanagement {
    background-image: url(../images/logmanagement.png);

    &:hover {
      background-image: url(../images/logmanagement_hover.png);
    }
  }

  // 系统监控
  .el-icon-systemmonitoring {
    background-image: url(../images/systemmonitoring.png);

    &:hover {
      background-image: url(../images/systemmonitoring_hover.png);
    }
  }

  // 数据安全
  .el-icon-datasecurity {
    background-image: url(../images/datasecurity.png);

    &:hover {
      background-image: url(../images/datasecurity_hover.png);
    }
  }

  // Hadoop审计
  .el-icon-hadoopaudit {
    background-image: url(../images/hadoopaudit.png);

    &:hover {
      background-image: url(../images/hadoopaudit_hover.png);
    }
  }
}

// 运营监管-循环
.xunhuan {
  display: inline-block;
  width: 22px;
  height: 20px;
  background-image: url(../images/xunhuan.png);
  margin: 0 0 -3px 8px;

  &:hover {
    cursor: pointer
  }
}

// 运营监管-返回
.backDatabasemonitoring {
  float: right;
  display: inline-block;
  width: 20px;
  height: 18px;
  background-image: url(../images/backDatabasemonitoring.png);

  &:hover {
    width: 20px;
    height: 18px;
    cursor: pointer;
    background-image: url(../images/backDatabasemonitoring_hover.png);
  }
}

// 文件管理-全部文件
.allfile {
  display: inline-block;
  width: 18px;
  height: 17px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/allfile.png);
}

// 文件管理-图片
.tupian {
  display: inline-block;
  width: 18px;
  height: 16px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/tupian.png);
}

// 文件管理-文档
.wendang {
  display: inline-block;
  width: 17px;
  height: 20px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/wendang.png);
}

// 文件管理-音乐
.yinyue {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/yinyue.png);
}

// 文件管理-其他
.qita {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/qita.png);
}

// 文件管理-视频
.shipin {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-bottom: -4px;
  margin-right: 10px;
  background-image: url(../images/shipin.png);
}

// 治理平台图标
.el-icon-file,
.el-icon-monitor,
.el-icon-abnormal,
.el-icon-manage,
.el-icon-analysis,
.el-icon-security {
  cursor: pointer;
  display: inline-block;
  /*margin: 20px;*/
}

.el-icon-file {
  width: 14px;
  height: 16px;
  background-image: url(../images/data_standard.png);
}

.el-icon-monitor {
  width: 19px;
  height: 19px;
  background-image: url(../images/dataQualityMonitoring.png);
}

.el-icon-abnormal {
  width: 17px;
  height: 18px;
  background-image: url(../images/qualityException.png);
}

.el-icon-manage {
  width: 18px;
  height: 18px;
  background-image: url(../images/data_gl.png);
}

.el-icon-analysis {
  width: 18px;
  height: 18px;
  background-image: url(../images/data_fx.png);
}

.el-icon-security {
  width: 20px;
  height: 20px;
  background-image: url(../images/data_security.png);
}

// 服务的图标
.approval,
.dataservice,
.interaction,
.relation {
  cursor: pointer;
  display: inline-block;
  margin: 20px;
}

.approval {
  width: 16px;
  height: 18px;
  background-image: url(../images/approval.png);
}

.dataservice {
  width: 20px;
  height: 20px;
  background-image: url(../images/dataservice.png);
}

.interaction {
  width: 17px;
  height: 18px;
  background-image: url(../images/interaction.png);
}

.relation {
  width: 18px;
  height: 18px;
  background-image: url(../images/relation.png);
}

.table-pagination {
  border: 1px solid #ebeef5;
  border-top: none;
  padding: 15px;
  text-align: right;
}

.link {
  color: #1691e4;
}

.view-info {
  min-height: 100%;
  border: 1px solid #ebeef5;
  box-sizing: border-box;

  .head {
    border-bottom: 1px solid #ebeef5;
    padding: 15px;
    background: #eee;
  }

  .content {
    padding: 15px;
    /*width: 900px;*/
  }

  .actions {
    padding: 20px;
  }
}

.origin {
  &-group {
    .title {
      position: relative;
      padding: 10px 0 10px 34px;
      background: none no-repeat left center;
      background-size: 22px auto;

      &.relationdata {
        background-image: url(../images/relationdata.png);
      }

      &.nosql {
        background-image: url(../images/NoSQL.png);
      }

      &.storage {
        background-image: url(../images/storage.png);
      }
    }

    h5 {
      font-size: 16px;
    }
  }

  &-list {
    padding: 20px 60px;
  }

  &-item {
    float: left;
    position: relative;
    display: inline-block;
    width: 100px;
    text-align: center;
    padding-top: 50px;
    cursor: pointer;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 44px;
      background: none no-repeat center;
    }

    &.mysql:before {
      background-image: url(../images/mysql.png);
    }

    &.sql-server:before {
      background-image: url(../images/SQLserver.png);
    }

    &.postgre-sql:before {
      background-image: url(../images/postgresql-01.png);
    }

    &.oracle:before {
      background-image: url(../images/Oracle.png);
    }

    &.db2:before {
      background-image: url(../images/DB2.png);
    }

    &.hive:before {
      background-image: url(../images/Hive.png);
    }

    &.mongodb:before {
      background-image: url(../images/MongoDB.png);
    }

    &.memchace:before {
      background-image: url(../images/Memcache.png);
    }

    &.redis:before {
      background-image: url(../images/Redis.png);
    }

    &.hbase:before {
      background-image: url(../images/HBase.png);
    }

    &.hdfs:before {
      background-image: url(../images/HDFS.png);
    }

    &.ftp:before {
      background-image: url(../images/FTP.png);
    }

    .name {
      font-size: 16px;
      color: #999;
    }

    .radio {
      position: relative;
      margin-top: 10px;

      span {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../images/radio_btn.png) no-repeat center;

        &.act {
          background-image: url(../images/radio_blue.png);
        }
      }
    }
  }

  &-view {
    display: inline-block;
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
  }
}

.forms {
  .input-group {
    padding: 10px 0;

    label {
      display: inline-block;
      width: 120px;
    }
  }

  .inline {
    display: inline-block;
  }

  .w49 {
    width: 49%;
  }
}

.custom-table {
  width: 100%;
  border: 1px solid #ebeef5;

  tbody tr {
    border-top: 1px solid #ebeef5;

    &:hover {
      td {
        background: #f5f7fa;
      }
    }
  }

  th,
  td {
    &:not(:first-child) {
      border-left: 1px solid #ebeef5;
    }

    padding: 12px;
  }

  th {
    color: #909399;
  }

  td {
    text-align: center;
  }

  .dept-title {
    text-align: left;
  }

  .has-child {
    display: inline-block;
    width: 20px;
    height: 100%;
  }
}

.fc-error {
  color: #e91212;
}

.fc-success {
  color: #1dd49b;
}

// .organiza {
//   position: relative;
//   padding-left: 310px;
//   height: 100%;

//   .tree-actions {
//     position: absolute;
//     top: 0;
//     left: 0;
//     display: inline-block;
//     width: 300px;
//     height: 40px;
//   }

//   .tree-cloumn {
//     position: absolute;
//     top: 40px;
//     left: 0;
//     display: inline-block;
//     width: 300px;
//     height: calc(100% - 40px);
//     padding: 15px;
//     box-sizing: border-box;
//     overflow: auto;
//     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
//   }
// }

// 基础管理-文件管理
// .file-main {
//   //display: flex;
//   margin-top: 20px;
// }

// 左边列表
// .file-left {
//   float: left;
//   display: inline-block;
//   width: 20%;
//   padding: 20px 15px;
//   background-color: #ffffff;
//   border: 1px solid #e7eaec;
// }

.file-upload {
  padding-bottom: 15px;
}

.folder-list {
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;

  &-li {
    display: block;
    color: #666666;
    padding: 5px 0;

    &:not(:last-child) {
      border-bottom: 1px solid #e7eaec;
    }

    a:hover {
      color: #13b5b7;
    }

    a.active {
      color: #13b5b7;
    }
  }
}

// 基础管理-文件管理
// 右边列表
.file-right {
  float: left;
  display: inline-block;
  width: 80%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;

  .file-title {
    background-color: white;
    height: 50px;
    border: 1px solid #e7eaec;
    border-bottom: none
  }
}

.file-right-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.file-box {
  width: 200px;
  margin-right: 20px;
}

.file {
  width: 100%;
  border: 1px solid #e7eaec;
  padding: 0;
  background-color: #ffffff;
  position: relative;
  margin-bottom: 20px;
  margin-right: 20px;
}

.file-image {
  height: 100px;
  overflow: hidden;
}

.file-name {
  padding: 5px;
  background-color: #f8f8f8;
  border-top: 1px solid #e7eaec;
}

/*.table-pagination{
  width: 200px;
}*/
.pagination {
  padding-left: 0;
  margin: 20px 0;
}

// 基础管理-系统管理
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

// 行政区划
.region-mian {
  height: 100%;
}

.region-left {
  float: left;
  display: inline-block;
  width: 40%;
  margin-right: 2%;
  background-color: #ffffff;
  min-height: 1px;
  //padding-right: 15px;
  //padding-left: 15px;
  height: 100%;
  overflow-y: auto;
}

.region-right {
  float: left;
  display: inline-block;
  width: 58%;
  min-height: 1px;
  //padding-right: 15px;
  //padding-left: 15px;
  overflow-y: auto;
}

.custom-checkbox {
  cursor: pointer;
  color: #ccc;
  font-size: 16px;

  &.act {
    color: #30b2ec;
  }
}

.user-batch {
  .item {
    position: relative;
    margin: 10px 0;
    padding-left: 50px;

    &:before {
      position: absolute;
      top: 10px;
      left: 0;
      display: inline-block;
      width: 34px;
      height: 34px;
      border-radius: 17px;
      text-align: center;
      line-height: 34px;
      color: #fff;
      background: #56a6f2;
    }

    &:nth-child(1):before {
      content: '1';
    }

    &:nth-child(2):before {
      content: '2';
    }

    &:nth-child(3):before {
      content: '3';
    }

    &:nth-child(4):before {
      content: '4';
    }

    p {
      padding: 10px 0;
    }

    .title {
      line-height: 34px;
    }
  }
}

.tips {
  color: #999;
}

.custom-tag {

  &-success,
  &-error {
    display: inline-block;
    border: none;
    border-radius: 4px;
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
  }

  &-success {
    background-color: #67c23a;
  }

  &-error {
    background-color: #f56c63;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

.encry {
  &-query {
    padding: 10px 0;

    .item {
      display: inline-block;
      padding-right: 20px;

      .tit {
        margin-right: 10px;
      }
    }
  }

  &-form {
    padding: 10px 0;

    .item {
      padding: 10px 0;

      .tit {
        float: left;
        padding: 10px;
      }
    }
  }
}

// 运营监控
.detailsHead {
  border: 1px solid #ebeef5;
  height: 120px;

  .detailsItem {
    float: left;
    width: 25%;

    p {
      margin: 10px 0;
    }
  }
}

// 数据库监控
.echartsMain {
  border: 1px solid #ebeef5;
  border-top: none;
  border-bottom: 20px;
}

.echartsContent {
  width: 85%;
  border: 1px solid #ebeef5;
  margin: 0 auto;
  background-color: #F7F7F7
}

.divTab {
  padding: 20px 0;

  .tableClass {
    border: 1px solid #ebeef5;
    width: 100%;
    color: #606266;
    tr {
      td {
        width: 25%;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        border: 1px solid #ddd;
        text-align: left;
        padding-left: 20px;
      }
    }
  }
}

.titleTOP {
  padding: 20px 60px;
  font-size: 16px;
}

.topChartsMain {
  width: 85%;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  .topCharts {
    flex: 3;

    &:nth-child(1) {
      margin-right: 15px;
    }

    &:nth-child(2) {
      margin-left: 15px;
    }
  }

  .echartsContent {
    width: 100%;
    margin: 0 0;
  }
}

.chartTitles {
  width: 85%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;

  .titleSpan {
    margin-right: -205px;
  }

  .SQLScelet {
    float: right;
  }
}

.spanPopver {
  display: inline-block;
  text-align: center;
}

.daochuspan {
  margin-right: 10px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 25px;

  .icon-daochu {
    font-size: 25px;
    color: #999;
  }

  .icon-daochu-hover {
    cursor: pointer;

    &:hover {
      color: #56a6f2;
    }
  }
}

/*Cron设置样式 start*/
.frequencyIcon {
  font-size: 24px;
  cursor: pointer;
  margin-left: 8px;
}

.frequencyIcon:hover {
  color: #409EFF;
}

.contenter .pull_right {
  float: right;
}

.contenter .pull_left {
  float: left;
}
